import React from 'react';
import { PropTypes } from 'prop-types';
import { observer } from 'mobx-react';
import { StyleSheet, View, Button, Text } from 'react-native';
import { StackNavigator } from 'react-navigation';
import { user } from '../store';

@observer
class SettingsScreen extends React.Component {
  static propTypes = {
    navigation: PropTypes.object.isRequired
  };

  static navigationOptions = {
    title: 'Settings'
  };

  render() {
    return (
      <View style={styles.wrapper}>
        <Text>Price: {user.price}</Text>
        <Text>Amount: {user.amount}</Text>
        <Text>Total: {user.total}</Text>
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

const SettingsStack = StackNavigator({
  Settings: { screen: SettingsScreen }
});

export default SettingsStack;
